<!DOCTYPE html>
<html>
<head>
	<title>合肥工业大学在线投诉</title>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" > 
	<style type="text/css">
	*{
		padding: 0;
		margin: 0
	}
	html{
		width: 100%;
		overflow: auto;
		min-height: 100%;
		position: relative;
	}
	body{
		background-image: url(ts.jpg);
		background-size: 100% 100%;
		background-repeat: no-repeat;
		font-family: 微软雅黑;
		overflow: hidden;
		
		min-height: 100%
	}
	header{
		background-color: #aa0003;
		height: 40px;
		width: 100%;
		line-height: 40px;
		color: #fff;
		text-align: center;
		font-size: 24px;
		margin-top: 30px;
		letter-spacing: 3px;
		overflow: hidden;
	}
	article{
		width: 80%;
		margin-left: 10%;
		/*	height: 70%;*/
		margin-top: 20px;
		border-radius: 8px;
		background-color: rgba(255,255,255,0.4);
		overflow: hidden;
		padding-bottom: 20px;
	}
	article input{
		width: 80%;
		margin-left: 6%;
		margin-top: 25px;
		border: solid 2px #6e6b6b;
		color: #302f2f;
		background-color: rgba(0,0,0,0);
		height:25px;
		border-radius: 6px;
		padding: 2px;
		padding-left: 8px;
		padding-right: 5px;
		font-weight: 700
	}
	article input::-webkit-input-placeholder { color:#6e6b6b; }
	textarea{
		width: 80%;
		margin-left: 6%;
		margin-top: 25px;
		border: solid 2px #6e6b6b;
		color: #302f2f;
		background-color: rgba(0,0,0,0);
		border-radius: 6px;
		padding: 5px;
		padding-left: 8px;
		padding-right: 5px;
		font-weight: 700;
		line-height: 20px
	}
	textarea::-webkit-input-placeholder { color:#6e6b6b; }
	article p{
		color: #363636;
		font-size: 12px;
		width: 100%;
		text-align: center;
		margin-top: 8px;
	}
	section{
		width: 100%;
		margin-top: 20px;
		margin-bottom: 50px;
	}
	section button{
		background-color: #aa0003;
		border: 0;
		width: 70px;
		height: 32px;
		color: #fff;
		border-radius: 8px;
		position: relative;
		left: 50%;
		margin-left: -35px;
		box-shadow: 2px 2px 1px #888888;
		font-size: 16px;
		line-height: 33px;
	}
	footer{
		position: absolute;
		bottom: 10px;
		width: 100%;
		text-align: center;
		color: rgba(0,0,0,0.8);
		font-size: 12px;
	}
</style>
</head>
<body>
	<header>
		在线投诉 COMPLANT
	</header>
	<article>
		<input type="text" name="name" placeholder="投诉人姓名">
		<input type="text" name="phone" placeholder="投诉人联系方式">
		<input type="text" name="bName" placeholder="被投诉人姓名">
		<input type="text" name="bPalce" placeholder="被投诉人单位">
		<input type="text" name="bPost" placeholder="被投诉人职务">
		<textarea rows="5" name="content" placeholder="投诉内容简要说明（100字内）"></textarea>
		<p>把文件材料发送至邮箱：<b>xsfts@hfut.edu.cn</b></p>
	</article>
	<section>
		<button id="submit">提 交</button>
	</section>
	<footer>
		@明理院网络文化工作室
	</footer>
	<script src="jquery-1.12.4.js"></script>
	<script type="text/javascript">
		$("#submit").click(function(){
			var data={
				tousuName:$("*[name='name']").val(),
				phone:$("*[name='phone']").val(),
				tousuedName:$("*[name='bName']").val(),
				institutions:$("*[name='bPalce']").val(),
				job:$("*[name='bPost']").val(),
				summary:$("*[name='content']").val()
			};
			if (data.name=='' || data.phone=='' || data.bName=='' || data.bPost=='' || data.bPalce=='' || data.content=='') {
				alert('请填写完整')
			}else{
				$.ajax({
					type:"post",
					url:"http://tousu.hfutonline.net/tousu",
					data:JSON.stringify(data),
					dataType:"json",
					contentType : 'application/json; charset=UTF-8',
					success: function (data) {
						alert(data.data)
					}
				})
			}
			
			

		});
	</script>
</body>
</html>